window.onload = () => {
  const excute = () => {
    const canvas = document.getElementById("canvas");
    if (canvas.getContext) {
      console.log("进来");
      const ctx = canvas.getContext("2d");
      // 画矩形
      const drawRect = () => {
        ctx.fillRect(25, 25, 100, 100);
        ctx.clearRect(45, 45, 60, 60);
        ctx.strokeRect(50, 50, 50, 50);
      };
      // drawRect();
      // 画三角形
      const drawTriangle = () => {
        ctx.beginPath();
        ctx.moveTo(75, 50);
        ctx.lineTo(100, 75);
        ctx.lineTo(100, 25);
        ctx.fill();
      };
      //   drawTriangle();
      const drawGrid = () => {
        // 设置棋盘大小
        var size = 800;
        var cellSize = 5; // 每个格子的间隔
        // 绘制棋盘
        for (var i = 0; i < size; i += cellSize) {
          // 绘制水平线
          ctx.moveTo(0, i);
          ctx.lineTo(size, i);
          // 绘制垂直线
          ctx.moveTo(i, 0);
          ctx.lineTo(i, size);
        }

        // 设置线条样式
        ctx.strokeStyle = "black"; // 黑色线条
        ctx.lineWidth = 0.01; // 线条宽度

        // 绘制线条
        ctx.stroke();
      };
      //   drawGrid();
      const drawSmilingFace = () => {
        ctx.beginPath();
        ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
        ctx.moveTo(110, 75);
        ctx.arc(75, 75, 35, 0, Math.PI, false);
        ctx.moveTo(65, 65);
        ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
        ctx.moveTo(95, 65);
        ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
        ctx.stroke();
      };
      drawSmilingFace();
    }
  };
  excute();
};
